<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>4_生命周期(新)</title>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心插件 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 操作DOM插件 -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- jsx转js插件 -->
  <script type="text/javascript" src="../js/babel.min.js"></script>


  <script type="text/babel">
    // 创建组件
    class Count extends React.Component{
      // 初始化状态
      state = {
        count: 0
      }

      // 按钮点击回调
      add = () => {
        // 获取当前状态
        const {count} = this.state
        // 更新状态
        this.setState({count: count+1})
      }

      // 卸载组件按钮回调
      discardRod = () => {
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        console.log("组件已卸载")
      }

      // 强制更新组件按钮回调
      lootRod = () => {
        // 强制更新组件
        this.forceUpdate()
      }

      // 若 state 的值取决于 props 可以使用 getDerivedStateFromProps
      static getDerivedStateFromProps(props, state){
        console.log("Count---getDerivedStateFromProps", props, state)
        return null
      }

      // 组件挂载完成钩子
      componentDidMount(){
        console.log("Count---componentDidMount")
      }

      // 是否需要更新(阀门)
      shouldComponentUpdate(){
        console.log("Count---shouldComponentUpdate")
        return true
      }

      // 组件更新之前获取快照
      getSnapshotBeforeUpdate(){
        console.log(this)
        console.log("Count---getSnapshotBeforeUpdate")
        const {count} =this.state
        return `snapshot: ${count}`
      }

      // 组件更新完成钩子
      componentDidUpdate(prevPropes, prevState, snapshotValue){
        console.log("Count---componentDidUpdate", prevPropes, prevState, snapshotValue)
      }

      // 组件将要卸载钩子
      componentWillUnmount(){
        console.log("Count---componentWillUnmount")
      }

      render(){
        const {count} = this.state
        // console.log("count: ", count)
        console.log("Count---render")
        return(
          <div>
            <h2> 当前功德: {count} </h2>
            <button onClick={this.add}> 积攒功德 </button>
            <button onClick={this.discardRod}> 扔掉犍稚 </button>
            <button onClick={this.lootRod}> 抢走犍稚 </button>
          </div>
        )
      }
    }

    // 父组件 A
    class A extends React.Component{
      state = {
        carName: "奥迪"
      }

      changeCar = ()=>{
        this.setState({carName: "奇瑞"})
      }

      render(){
        console.log(this)
        return (
          <div>
            <div>A组件, 我的汽车是{this.state.carName}</div>
            <button onClick={this.changeCar}>换车</button>
            <B carName={this.state.carName}/>
          </div>
        )
      }
    }

    // 子组件 B
    class B extends React.Component{
      // 组件将要接收 props 钩子
      UNSAFE_componentWillReceiveProps(props){
        console.log("B---componentWillReceiveProps", props)
      }

      render(){
        console.log(this)
        return (
          <div>
            <div>B组件, 我的汽车{this.props.carName}</div>
          </div>
        )
      }
    }


    // 渲染组件到页面
    const container = document.getElementById('test')
    const root = ReactDOM.createRoot(container)
    root.render(<Count count={100}/>)
  </script>

</body>
</html>